<template>
  <div>
    <el-page-header @back="goBack" content="资产详情"> </el-page-header>
    <div class="ueba-detail-main">
      <el-tabs type="border-card" v-model="tabsName" @tab-click="tabClick">
        <el-tab-pane label="资产信息">
          <base-info v-if="formData.id && tabsName == '0'" @closeTag="initData" :formData="formData" />
        </el-tab-pane>
        <el-tab-pane label="敏感URL">
          <url-table v-if="formData.id && tabsName == '1'" :formData="$route.query.id" />
        </el-tab-pane>
        <el-tab-pane label="审计报告" :disabled="$route.query.reportId ? false : true">
          <base-report v-if="formData.id && tabsName == '2'" :formData="formData" />
        </el-tab-pane>
        <el-tab-pane label="风险列表">
          <risklist-table v-if="formData.id && tabsName == '3'" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import baseInfo from "./components/baseInfo.vue";
import risklistTable from "./components/risklistTable.vue";
import urlTable from "./components/urlTable.vue";
import baseReport from "./components/baseReport.vue";
export default {
  components: {
    baseInfo,
    risklistTable,
    baseReport,
    urlTable,
  },
  props: {},
  data() {
    return {
      tabsName: "0",
      formData: {},
      urlData: [],
    };
  },
  async mounted() {
    if (this.$route.query.id) {
      this.initData();
    }
  },
  methods: {
    tabClick() {
      console.log("[ this.tabsName ] >", this.tabsName);
    },
    async initData() {
      this.formData = await this.fatchData(this.$route.query.id);
    },
    goBack() {
      this.$router.push("/property/manage");
    },

    async fatchData(id) {
      let res = await this.$store.dispatch("propertyManage/detail", { id: id });
      return res.data;
    },
  },
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.check-box {
  margin: 0 0 20px 20px;
}
</style>
